<template>
  <div class="leftTop-content" v-if="pageFlag">
    <div>
      <div class="lan">
        <dv-digital-flop :config="lanCfg"></dv-digital-flop>
      </div>
      <span style="color: #00f0f0;">耗电量</span>
    </div>
    <div>
      <div class="lv">
        <dv-digital-flop :config="lvCfg"></dv-digital-flop>
      </div>
      <span style="color: #52fcaa;">耗水量</span>
    </div>
    <div>
      <div class="huang">
        <dv-digital-flop :config="huangCfg"></dv-digital-flop>
      </div>
      <span style="color: #f7a319;">碳排放量</span>
    </div>
  </div>
  <reacquire @click="getData" v-else/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules'
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      lanCfg:{
        number:[0],
        style:{
          fontSize:24,
          fill:'#00f0f0'
        }
      },
      lvCfg:{
        number:[0],
        style:{
          fontSize:24,
          fill:'#52fcaa'
        }
      },
      huangCfg:{
        number:[0],
        style:{
          fontSize:24,
          fill:'#f7a319'
        }
      },
    };
  },
  filters: {},
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if(this.timer){
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getData(){
      currentGET('big1').then(res => {
        if (res.success) {
          this.lanCfg={
            ...this.lanCfg,
            number:[res.rows[0].totalOfficePowerConsume + res.rows[0].totalPowerConsume]
          }
          this.lvCfg={
            ...this.lvCfg,
            number:[res.rows[0].totalOfficeWaterConsume + res.rows[0].totalWaterConsume]
          }
          this.huangCfg={
            ...this.huangCfg,
            number:[res.rows[0].totalCarbonEmission]
          }
          this.pageFlag = true
          this.switper()
        }else{
          this.pageFlag = false
        }
      })
    },
    switper(){
      this.timer = setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>
.leftTop-content{
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  div{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    div{
      width: 150px;
      height: 150px;
      position: relative;
      ::before{
        content:'';
        width:150px;
        height: 150px;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        animation: rotating 14s infinite linear;
      }
    }
    .lan{
      ::before{
        background-image: url('../../assets/img/left_top_lan.png');
      }
    }
    .lv{
      ::before{
        background-image: url('../../assets/img/left_top_lv.png');
      }
    }
    .huang{
      ::before{
        background-image: url('../../assets/img/left_top_huang.png');
      }
    }
  }
}
</style>